<!-- 公共布局组件 -->
<template>
	<view class="custom-camera">
		<view class="camera-wrap" :style="{height:cameraHeight+'px'}">
			<slot></slot>
		</view>
		<view class="camera-options" :style="[{height:optionsHeight+'px'}]">
<view class="ciasms">
		<view class="astitle">
			{{title}}
		</view>
		
		<image :src="beiji" mode="aspectFill" class="miimhae" style="width: 348rpx;height: 220rpx;"></image>
		
		<view class="bor_sa">
			<view class="camera-options-center camera-item">
				<image src="/static/masking/pai.png" mode="scaleToFill" @click="handleClikFn('shutter')"></image>
			</view>
		</view>
		
</view>
		</view>
	</view>
</template>

<script>
	// 提供一个相机的插槽位置
	// 底部可以自定义最右侧按钮（相册/反转）
	import config from '../config.js'
	export default {
		data() {
			return {
				cameraHeight: '', //相机画面宽度
				optionsHeight: '', //操作区域
				beiji: null,
				title: null,
			}
		},
		props: {
			coverImageType: { //遮罩层的类型 （必须在config里面的定义的）
				type: String,
				default: 'portrait'
			}
		},
		methods: {
			handleClikFn(instruct) {
				this.$emit('instruct', instruct)
			}
		},
		mounted() {
			this.beiji = config[this.coverImageType].beiji
			this.title = config[this.coverImageType].title
			this.cameraHeight = uni.getSystemInfoSync().screenHeight * 0.8
			this.optionsHeight = uni.getSystemInfoSync().screenHeight * 0.28
		},
	}
</script>

<style lang="scss">
	.ciasms{
		width:100%;
	position: relative;
	height: 100%;
	}
	.astitle{
		position: absolute;
		top: 5%;
		left: 39%;
	}
	.bor_sa{
		position: absolute;
		top: 75%;
		left: 43%;
	}
	.miimhae{
		position: absolute;
		top: 20%;
		left: 27%;
	}
	.custom-camera {
		height: 90vh;
		background-color: #000;

		.camera-wrap {
			// background-color: #f90;
		}

		.camera-options {
			background-color: #fff;
			position: fixed;
			bottom: 3%;
			width: 100%;

			.camera-item {
				flex: 1;
				height: 100%;

				>image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.camera-options-center {
				>image {
					width: 90rpx;
					height: 90rpx;
				}
			}
		}
	}
</style>